<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {TEngine} from "./assets/ts/tEngine"
import { basicObjects } from "./assets/ts/tBasicObject"
import { lights } from "./assets/ts/tLights"
import { helpers } from "./assets/ts/tHelper"
import { codeModels } from './assets/ts/tCodeModel';
import { framePromise } from "./assets/ts/tLoadModel"

const threeCanvas = ref<HTMLElement|null>(null);
onMounted(() => {
  let TE = new TEngine(threeCanvas.value as HTMLElement);
  TE.addObject(
    ...basicObjects, 
    ...lights, 
    ...helpers,
    ...codeModels
  );
  // 加载外部模型
  framePromise.then(group=>{
    TE.addObject(
      group
    );
  })
})
</script>

<template>
  <div class="three-canvas" ref="threeCanvas"></div>
</template>

<style scoped>
  .three-canvas{
    width: 100%;
    height: 100%;
  }
</style>
